<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./styles/PCcommon.css">
  <link rel="stylesheet" href="./styles/shopping.css">
  <link rel="stylesheet" href="./jQueryGwc/css/reset.css">
  <link rel="stylesheet" href="./jQueryGwc/css/carts.css">
  
</head>

<body>

  <!-- 头部 -->
  <header>
    <div class="center">
      <div class="left">
        <a href="./login.html">请登录</a>
        <a href="#">手机逛淘宝</a>
        <a href="#">网页无障碍</a>
      </div>


      <div class="right">
        <a href="#">淘宝网首页</a>
        <div class="show1">
          <a href="#">我的淘宝<span class="glyphicon glyphicon-triangle-bottom trigon"></span></a>
          <!-- 下拉菜单隐藏显示 -->
          <div>
            <ul>
              <li>
                <a href="#">已买到的宝贝</a>
              </li>
              <li>
                <a href="#">已卖出的宝贝</a>
              </li>
            </ul>
          </div>
        </div>
        <a href="#"><span class="glyphicon glyphicon-shopping-cart" style="color:red"></span>购物车</a>
        <div class="show2">
          <a href="#">收藏夹<span class="glyphicon glyphicon-triangle-bottom trigon"></span>
          </a>
          <!-- 下拉菜单隐藏显示 -->
          <div>
            <ul>
              <li>
                <a href="#">收藏的宝贝</a>
              </li>
              <li>
                <a href="#">收藏的店铺</a>
              </li>
            </ul>
          </div>
        </div>
        <a href="#">商品分类</a>
        <a href="#">免费开店</a>
        <span>|</span>
        <div class="show3">
          <a href="#">千牛卖家中心<span class="glyphicon glyphicon-triangle-bottom trigon"></span></a>
          <div>
            <ul>
              <li>
                <a href="#">开店入驻</a>
              </li>
              <li>
                <a href="#">已卖出的宝贝</a>
              </li>
              <li>
                <a href="#">出售中的宝贝</a>
              </li>
              <li>
                <a href="#">卖家服务市场</a>
              </li>
              <li>
                <a href="#">卖家培训中心</a>
              </li>
              <li>
                <a href="#">体检中心</a>
              </li>
              <li>
                <a href="#">电商学习中心</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="show4">
          <a href="#">联系客服<span class="glyphicon glyphicon-triangle-bottom trigon"></span></a>
          <div>
            <ul>
              <li><a href="#">消费者客服</a></li>
              <li><a href="#">卖家客服</a></li>
              <li><a href="#">意见反馈</a></li>
              <li><a href="#">网页版旺旺</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- 搜索 -->
  <div class="search">
    <div class="center">
      <div class="search-log">
        <a href="#"><img src="./img/shopping/log.png" alt="" style="height: 58px;"></a>
      </div>
      <div class="search-box">
        <div class="search-triggers">
          <ul>
            <li class="one-li" data-searchtype="baby">
              <a href="#">
                <span class="glyphicon glyphicon-search magnifier"></span>
                <span class="text">宝贝</span>
                <span class="glyphicon glyphicon-chevron-down arrow"></span>
              </a>
            </li>
            <div class="showbox">
              <li class="hidden-li" data-searchtype="tmall">
                <a href="#">天猫</a>
              </li>
              <li class="hidden-li" data-searchtype="shop">
                <a href="#">店铺</a>
              </li>
            </div>
          </ul>
        </div>
        <div class="search-input">
          <input type="text">
        </div>
        <div class="search-btn">
          <button type="submit">搜索</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 主体 -->
  <main>
    <div class="center">
      <div class="top">
        <div class="top-left">购物车（全部<strong class="piece_num">0</strong>）</div>
        <div class="top-right">
          <div class="text1">已选商品（不含运费）</div>
          <div class="total_text num2">&nbsp;0.00</div>
          <a class="btn">结&nbsp;算</a>
        </div>
      </div>
      <div class="buttom">
        <section class="cartMain">
          <div class="cartMain_hd">
            <ul class="order_lists cartTop">
              <li class="list_chk">
                <!--所有商品全选-->
                <input type="checkbox" id="all" class="whole_check">
                <label for="all"></label>
                全选
              </li>
              <li class="list_con">商品信息</li>
              <li class="list_info">商品参数</li>
              <li class="list_price">单价</li>
              <li class="list_amount">数量</li>
              <li class="list_sum">金额</li>
              <li class="list_op">操作</li>
            </ul>
          </div>

          <div class="cartBox">
            <div class="shop_info">
              <div class="all_check">
                <!--店铺全选-->
                <input type="checkbox" id="shop_a" class="shopChoice">
                <label for="shop_a" class="shop"></label>
              </div>
              <div class="shop_name">
                店铺：<a href="javascript:;">搜猎人艺术生活</a>
              </div>
            </div>
            <!-- 购物车内容 -->
            <div class="order_content">
              <ul class="order_lists">
                <!-- 单选商品 -->
                <li class="list_chk">
                  <input type="checkbox" id="checkbox_2" class="son_check">
                  <label for="checkbox_2"></label>
                </li>
                <li class="list_con">
                  <div class="list_img"><a href="javascript:;"><img src="./jQueryGwc/images/1.png" alt=""></a></div>
                  <div class="list_text"><a href="javascript:;">【新品上市】华为手环7 智能手环华为手表连续血氧监测全面屏长续航运动手环智能心率监测HUAWEI NFC功能</a></div>
                </li>
                <li class="list_info">
                  <p>规格：默认</p>
                  <p>尺寸：16*16*3(cm)</p>
                </li>
                <li class="list_price">
                  <p class="price">￥980</p>
                </li>
                <li class="list_amount">
                  <div class="amount_box">
                    <a href="javascript:;" class="reduce reSty">-</a>
                    <input type="text" value="1" class="sum">
                    <a href="javascript:;" class="plus">+</a>
                  </div>

                </li>
                <li class="list_sum">
                  <p class="sum_price">￥980</p>
                </li>
                <li class="list_op">
                  <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
                </li>
              </ul>
              <ul class="order_lists">
                <li class="list_chk">
                  <input type="checkbox" id="checkbox_3" class="son_check">
                  <label for="checkbox_3"></label>
                </li>
                <li class="list_con">
                  <div class="list_img"><a href="javascript:;"><img src="./jQueryGwc/images/2.png" alt=""></a></div>
                  <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div>
                </li>
                <li class="list_info">
                  <p>规格：默认</p>
                  <p>尺寸：16*16*3(cm)</p>
                </li>
                <li class="list_price">
                  <p class="price">￥780</p>
                </li>
                <li class="list_amount">
                  <div class="amount_box">
                    <a href="javascript:;" class="reduce reSty">-</a>
                    <input type="text" value="1" class="sum">
                    <a href="javascript:;" class="plus">+</a>
                  </div>
                </li>
                <li class="list_sum">
                  <p class="sum_price">￥780</p>
                </li>
                <li class="list_op">
                  <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
                </li>
              </ul>
              <ul class="order_lists">
                <li class="list_chk">
                  <input type="checkbox" id="checkbox_6" class="son_check">
                  <label for="checkbox_6"></label>
                </li>
                <li class="list_con">
                  <div class="list_img"><a href="javascript:;"><img src="./jQueryGwc/images/3.png" alt=""></a></div>
                  <div class="list_text"><a href="javascript:;">夏季男士迷彩无袖T恤圆领潮流韩版修身男装背心青年时尚打底衫男</a></div>
                </li>
                <li class="list_info">
                  <p>规格：默认</p>
                  <p>尺寸：16*16*3(cm)</p>
                </li>
                <li class="list_price">
                  <p class="price">￥180</p>
                </li>
                <li class="list_amount">
                  <div class="amount_box">
                    <a href="javascript:;" class="reduce reSty">-</a>
                    <input type="text" value="1" class="sum">
                    <a href="javascript:;" class="plus">+</a>
                  </div>
                </li>
                <li class="list_sum">
                  <p class="sum_price">￥180</p>
                </li>
                <li class="list_op">
                  <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
                </li>
              </ul>
            </div>
          </div>


          
          <!--底部-->
          <div class="bar-wrapper">
            <div class="bar-left">
              <ul>
                <li class="list_chk">
                  <!--所有商品全选-->
                  <input type="checkbox" id="all" class="whole_check">
                  <label for="all"></label>
                  全选
                </li>
                <li class="list_op">
                  <p class="del"><a href="javascript:;" class="delBtn">删除</a></p>
                </li>
                <li>
                  <a href="#">移入收藏夹</a>
                </li>
              </ul>
            </div>
            <div class="bar-right">
              <div class="piece">已选商品<strong class="piece_num">0</strong>件</div>
              <div class="totalMoney">共计: <strong class="total_text">0.00</strong></div>
              <div class="calBtn"><a href="javascript:;">结算</a></div>
            </div>
          </div>
        </section>
        <section class="model_bg"></section>
        <section class="my_model">
          <p class="title">删除宝贝<span class="closeModel">X</span></p>
          <p>您确认要删除该宝贝吗？</p>
          <div class="opBtn"><a href="javascript:;" class="dialog-sure">确定</a><a href="javascript:;"
              class="dialog-close">关闭</a></div>
        </section>
      </div>
      <div></div>
  </main>

  <!-- 脚部 -->
  <footer>
    <div class="center">
      <ul>
        <li><a href="#">阿里巴巴集团</a></li>
        <li><a href="#">阿里巴巴国际站</a></li>
        <li><a href="#">阿里巴巴中国站</a></li>
        <li><a href="#">全球速卖通</a></li>
        <li><a href="#">淘宝网</a></li>
        <li><a href="#">天猫</a></li>
        <li><a href="#">聚划算</a></li>
        <li><a href="#">一淘</a></li>
        <li><a href="#">阿里妈妈</a></li>
        <li><a href="#">阿里云计算</a></li>
        <li><a href="#">云OS</a></li>
        <li><a href="#">万网</a></li>
        <li><a href="#">支付宝</a></li>
      </ul>
      <div class="buttom">
        <div class="top">
          <a href="#">关于淘宝</a>
          <a href="#">合作伙伴</a>
          <a href="#">营销中心</a>
          <a href="#">联系淘宝</a>
          <a href="#">开放平台</a>
          <a href="#">诚征英才</a>
          <a href="#">联系我们</a>
          <a href="#">网站地图</a>
          <a href="#">法律声明及隐私权政策</a>
          <span>&copy; 2022 Taobao.com 版权所有</span>
        </div>
        <div class="under">
          <ul>
            <li>网络文化经营许可证：<a href="">文网文[2010]040号</a></li>
            <li class="text">增值电信业务经营许可证：浙B2-20080224-1</li>
            <li class="text2">信息网络传播视听节目许可证：1109364号</li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>
<script src="./jQueryGwc/js/jquery-1.11.0.min.js"></script>
<!-- <script src="./js/carts.js"></script> -->
<script src="./bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
<script src="./js/shop.js" type="module"></script>

<script>
  $(function () {
    $('.showbox').on('click', 'li', function (ev) {
      let a = $('.text').text();
      let b = $(this).text();
      $('.text').text(b);
      $(this).text(a);
    })
  })

</script>

<script>
  $(document).bind('scroll', (e) => {
    if (window.scrollY >= 650) {
      $('.bar-wrapper').css('position', 'relative')
      $('.goTop').css('display', 'block');
    } else {

      $('.bar-wrapper').css('position', 'fixed')
      $('.goTop').css('display', 'none');
    }
  })

</script>